<template>
  <!--柱状图-->
  <div class="track-histogram-fission">
    <div id="echart3" class="account-display-echart" ref="histogramChart"></div>
  </div>
</template>

<script>
export default {
    name: 'TrackHistogramFission',
    data () {
        return {
            initEchart: '',
            isData: true,
            option: {
                color: ['#40a9ff'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    width: '200px',
                    containLabel: true
                },
                yAxis: [
                    {
                        type: 'category',
                        data: [],
                        axisTick: {
                            alignWithLabel: false
                        }
                    }
                ],
                xAxis: [
                    {
                        type: 'value',
                        minInterval: 5
                    }
                ],
                series: [
                    {
                        type: 'bar',
                        barWidth: '30%',
                        data: []
                    }
                ]

            }
        }
    },
    methods: {
        init (list) {
            this.formatData(list)
            this.initEchart = 'init'
            const histogramChart = window.echarts.init(this.$refs.histogramChart)
            histogramChart.setOption(this.option)
        },
        hide () {
            this.initEchart = ''
        },
        formatData (list) {
            if (this.initEchart) {
                this.option.xAxis.data = []
                this.option.series[0].data = []
            }
            const axisList = []
            const tempList = []
            list.forEach(item => {
                axisList.push(String(item.level) + '级')
                tempList.push(item.count)
            })
            this.option.yAxis[0].data = axisList
            this.option.series[0].data = tempList
        }
    }
}
</script>

<style lang="less">
    .track-histogram-fission{
        padding: 0 20px;
        height: 340px;
        min-width: 600px;
        background: white;
        overflow: hidden;
        .histogram-fission-no-data{
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 14px;
            color: #909399;
        }
        .account-display-echart {
            width: 600px;
            min-height: 250px;
        }
    }
</style>
